<style lang="less" scoped>
.xilie{
    .xl_data{
      background: white;
      padding-left: 0.5vw;
      padding-right: 0.5vw;
      width: 61vw;
      margin-left: 18.5vw;
      .xilielist_data{
        min-height: 39vw;
      }
    .xl_img{
      cursor:pointer;
      width: 100%;
      height: 10.8vw;
    }
    .xl_title{
      width: 100%;
      text-align:center;
      font-size: 0.8vw;
      height: 3vw;
    }
    .cailiaotitle{
      font-size: 1.1vw;
    }
  }
}


</style>
<template>
  <div class="xilie">
    <MainUser></MainUser>
    <div v-if="size>9" style="height:3.2vw"></div>
    <affix v-if="size>9" style="margin-top:-3.2vw">
      <MainTitle @sousuo="titleSousuo" ref="maintitle"></MainTitle>
    </affix>
    <MainTitle v-if="size<=9" @sousuo="titleSousuo"></MainTitle>
    
    <div class="xl_data">
      <div style="height:0.5vw;"></div>
      <div class="cailiaotitle">经典案例</div>
      <div class="xilielist_data" v-loading="loading">
        <el-row :gutter="20" v-loading="loading">
          <el-col :span="8" v-for="item in classiccases">
            <el-image
              class="xl_img"
              :src="item.thumb"
              :fit="'cover'" @click="downanli(item.id)"></el-image>
            <!-- <img class="xl_img" :src="item.thumb" @click="downxilie(item.id)"/> -->
            <div class="xl_title">{{item.title}}</div>
          </el-col>
        </el-row>
      </div>
      <div style="height:1vw;"></div>
      <el-pagination
        background
        style="text-align: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="prev, pager, next,sizes"
        :current-page="pagintion.page"
        :page-sizes="pagesizes"
        :page-size="pagintion.page_size"
        :total="pagintion.total">
      </el-pagination>
      <div style="height:1vw;"></div>
    </div>
    
  </div>
</template>
<script>
import { classiccaselist } from '@/request/api';
import MainTitle from '../main_title'
import MainUser from '../main_user'
export default {
    data() {
        return {
            classiccases:[
            ],
            pagintion: {
              total: 0,
              page_size:50,
              page: 1,
            },
            loading:false,
            pagesizes: [30,50,100],
            keywords:'',
            size:0,
        }
    },
    mounted() {
      if(this.$route.query.keywords != undefined){
        this.keywords = this.$route.query.keywords;
        this.$refs.maintitle.setinput2(this.keywords);
      }
      this.getclassiccaselist();
    },
    methods: {
      downanli(id){
        let routeUrl = this.$router.resolve({
          path: 'jlb_anlidata',
          query: {'id': id}
        });
        window.open(routeUrl.href, '_blank');
      },
      //翻页
      handleCurrentChange(val) {
        this.pagintion.page = val;
        this.getclassiccaselist();
      },
      //修改条数
      handleSizeChange(val){
        this.pagintion.page_size = val;
        this.getclassiccaselist();
      },

      //获取C经典案例列表数据
      getclassiccaselist(){
          var param = {};
          param.page = this.pagintion.page;
          param.size = this.pagintion.page_size;
          param.keywords = this.keywords;
          this.loading = true;
          classiccaselist(param).then(res => {
            this.loading = false;
            if(res.ok){
                this.classiccases = res.data.data;
                this.size = this.classiccases.length;
                this.pagintion.total = res.data.total;
            }
          })
      },
      titleSousuo(keywords){
        this.keywords = keywords;
        this.getclassiccaselist();
      }
    },
    components: {
        MainTitle,
        MainUser
    },

}
</script>
